/*
 * @Author: xiaosihan 
 * @Date: 2023-12-19 21:41:22 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-30 15:01:50
 */

import { autorun, toJS } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./search.module.less";
import { AutoComplete, Input } from "antd";
import siChuanMap3DStore from "../chengduMap3DStore";
import doubtfulSituationStore from "@views/DoubtfulSituation/doubtfulSituationStore";

interface Iprops {
    children?: ReactNode
}

// 搜索
export default function Search(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [options, setOptions] = useState([
        // { value: 'Wall Street' },
    ]);
    const [value, setValue] = useState("");

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        const mapData = toJS(doubtfulSituationStore.map_data);
        setOptions(mapData.map((d: any) => {
            return {
                value: d.name
            }
        }));
    }), []);

    useEffect(() => autorun(() => {
        const activeMapData = toJS(doubtfulSituationStore.activeMapData);
        if (activeMapData) {
            setValue(activeMapData.name);
        }
    }), []); 

    return (
        <div className={styles.search} >
            <AutoComplete
                className={styles.autoComplete}
                style={{ width: 230 }}
                value={value}
                options={options}
                placeholder="搜索机构"
                clearIcon={true}
                onSelect={value => {
                    const mapData = toJS(doubtfulSituationStore.map_data);
                    const map = mapData.find((d: any) => d.name === value);
                    doubtfulSituationStore.setActiveMap(map);
                    siChuanMap3DStore.setAreaCode(510100);
                }}
            />
        </div>
    );

}